.compass-outer-ring-background {
    border: 12px solid rgba(200,211,218,80%);
}

.compass-gyro-background {
    background-color: rgba(200,211,218,80%);
    border: 1px solid rgba(255,255,255,0.2);
}
.navigation-control {
    border-bottom: 1px solid #555555;
}
.navigation-controls {
    pointer-events: auto;
    border: 1px solid #226a9a;
    border-radius: 15px;
}
.navigation-controls > div:first-child {
    /* padding-top: 5px; */
    border-top-right-radius: 14px;
    border-top-left-radius: 14px;
}
.navigation-controls > div:last-child {
    /* padding-bottom: 5px; */
    border-bottom: none;
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
}
.navigation-controls > div {
    background-color: #2B87C4;
    cursor: pointer;
    border-bottom: 1px solid #226a9a;
}

.compass-outer-ring {
    fill: #fff;
    stroke: #404040;
}

.compass-outer-ring-background {
    border: 12px solid #c8d3da;;
}

.compass-gyro {
    fill: #fff;
}

.compass-gyro-background {
    background-color: #2B87C4;
    border: 2px solid #2B87C4;
}